<template>
  <div class="all">


    <button @click="demo">
      dianwo
    </button>
    <!-- 侧边栏 -->
    <el-aside width="200px" style="background-color: #304156">
      <!-- default-openeds属性指默认打开的栏目 -->
      <el-menu :default-openeds="[]">
        <el-submenu index="1" class="navigation">
          <template slot="title"
            ><i class="el-icon-message"></i>Statistics</template
          >
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="index1">Statistics</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2" class="navigation">
          <template slot="title"><i class="el-icon-menu"></i>Subject</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="index2">Enter</el-menu-item>
            <el-menu-item index="2-2" @click="index3">Modify</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3" class="navigation">
          <template slot="title"
            ><i class="el-icon-setting"></i>Student</template
          >
          <el-menu-item-group>
            <el-menu-item index="3-1" @click="index4">Score Entry</el-menu-item>
            <el-menu-item index="3-2" @click="index5">Modify</el-menu-item>
            <el-menu-item index="3-3" @click="index6"
              >Enter Student</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <!-- 手写top标签栏与左边栏联动 -->
    <div class="tab">
      <div class="content">
        <div
          style="position: relative;top: 90px;width: 1100px; border-bottom: 1px solid #E4E7ED;"
        >
          <!--6个按钮-->
          <button
            :class="index == number ? 'btn1' : 'btn'"
            @click="tab(index)"
            v-for="(item, index) in dataList"
            :key="index"
          >
            {{ item.option }}
          </button>
        </div>
      </div>
      <!--6个div-->
      <div id="content1" v-show="number == 0">
        1
      </div>
      <div id="content2" v-show="number == 1">
        2
      </div>
      <div id="content3" v-show="number == 2">
        3
      </div>
      <div id="content4" v-show="number == 3">
        4
      </div>
      <div id="content5" v-show="number == 4">
        5
      </div>
      <div id="content6" v-show="number == 5">
        6
      </div>
    </div>

    <!--  -->
  </div>
</template>
<script>
import {s_request} from "./network/request"
import axios from 'axios'

// import sidebarUi from '../components/sidebarUi/sidebarUi.vue';
export default {
  name: "asd2",
  components: {
    //  sidebarUi
  },
  mixins: [],
  props: {},
  data() {
    return {
      dianji: 0,
      number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
      dataList: [
        { option: "Statistics" },
        { option: "Enter" },
        { option: "Modify" },
        { option: "Score Entry" },
        { option: "Student Modify" },
        { option: "Enter Student" }
      ],
      studentId:'S42964551',
      gradeSemester:2
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    //定义切换方法
    tab(index) {
      this.number = index;
      console.log(index, this.number);
    },

    index1() {
      this.number = 0;
    },
    index2() {
      this.number = 1;
    },
    index3() {
      this.number = 2;
    },
    index4() {
      this.number = 3;
    },
    index5() {
      this.number = 4;
    },
    index6() {
      this.number = 5;
    }
    ,

    demo() {
      const params = {
        
      }
      axios.get('http://101.42.232.154:9001/student/getGrade/'+this.studentId+'/'+this.gradeSemester, {
          // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
          }).then(res =>{
            console.log(res)
          }).catch(error =>{
             console.log(error)
          })
    }
  }
};
</script>

<style>
.content {
  width: 1000px;
  margin: auto;
  /*按钮样式*/
  /*未选中时*/
}
.btn {
  width: 150px;
  height: 40px;
  border: 0;
  color: #909399;
  /* margin: 20px 0px; */
  background-color: #fff;
  border: #e4e7ed 1px solid;
}

/*选中时*/
.btn1 {
  width: 150px;
  height: 40px;
  /* border: 0; */
  border: #e4e7ed 1px solid;
  border-bottom: 0px solid;
  color: rgb(17, 17, 17);
  color: #409eff;
  /* margin: 20px 0px; */
  background-color: #fff;
}

#content1,
#content2,
#content3,
#content4,
#content5,
#content6 {
  background-color: #fff;
  height: 660px;
  font-size: 16px;
  line-height: 40px;
  margin-top: 120px;
}

/* all */
.all {
  display: flex;
}

/* 侧边栏 */
.el-aside {
  padding-top: 140px;
}
.el-menu-item-group {
  background-color: #2d3a4b;
}
.navigation {
  background-color: #304156;
  color: #fff;
}
.el-submenu .el-menu-item {
  color: #fff;
  font-family: "PMZD";
}
.el-submenu__title {
  color: #fff;
  font-family: "PMZD";
}
.all {
  display: flex;
  height: 820px;
}
</style>
